﻿@model ShopKart.Areas.User.Models.UserVm


@using (Ajax.BeginForm("EditUserProfile", "User", new { area = "User" }, new AjaxOptions
{
    OnSuccess = "onSuccessUserProfile",
    OnBegin = "GlobalOnBeginFunction('.formSaveButton')",
    OnComplete = "GlobalOnCompleteFunction('.formSaveButton')"
}, new { @class = "horizontal-form" }))
{
    <div class="modal-body">
        @Html.Partial("~/Views/Shared/_ShowMessage.cshtml")

        @Html.HiddenFor(x => x.UserId)

        <div class="form-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.FirstName, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", placeholder = "Enter First Name" })
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.LastName, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.LastName, new { @class = "form-control", placeholder = "Enter Last Name" })
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.MobileNo, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.MobileNo, new { @class = "form-control", placeholder = "Enter Mobile No." })
                    </div>
                </div>
            </div>
            <!--/row-->
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.PrimaryAddress, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.PrimaryAddress, new { @class = "form-control", placeholder = "Enter Primary Address" })
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.SecondaryAddress, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.SecondaryAddress, new { @class = "form-control", placeholder = "Enter Secondary Address" })
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(x => x.ZipCode, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.ZipCode, new { @class = "form-control", placeholder = "Enter Zip Code" })
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(x => x.City, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.City, new { @class = "form-control", placeholder = "Enter City Name" })
                    </div>
                </div>
            </div>
            <!--/row-->
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(x => x.State, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.State, new { @class = "form-control", placeholder = "Enter State Name" })
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.LabelFor(x => x.Country, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.Country, new { @class = "form-control", placeholder = "Enter Country Name" })
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div id="map" class="row">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn default">Close</button>
        @*<button type="submit" class="btn green btnSaveCategory">Save</button>*@

        <button type="submit" class="btn green btnSaveProfile ladda-button formSaveButton" data-style="zoom-in">
            <span class="ladda-label">Save</span>
        </button>
    </div>
}

<script src="~/Scripts/Shopkart/underscore.js"></script>
<script src="~/Scripts/Shopkart/googleMapsApi.js"></script>
<script src="~/Scripts/Shopkart/gMaps.js"></script>
@*<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-0nXoIb8yrzyiKBDMR5JQScrT3TstIq0&signed_in=true&callback=initMap" async defer></script>*@

<script>

    $(function () {
        var map = new GMaps({
            div: '#map',
            lat: 22.7142743,
            lng: 75.8709528
        });

        $('#map').width('100%').height(200);

        GMaps.on('click', map.map, function (event) {
            debugger;
            var index = map.markers.length;
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();

            var template = $('#edit_marker_template').text();

            var content = template.replace(/{{index}}/g, index).replace(/{{lat}}/g, lat).replace(/{{lng}}/g, lng);

            map.removeMarkers();

            map.addMarker({
                lat: lat,
                lng: lng,
                title: 'Marker #' + index
            });

            var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
            $.ajax({
                url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&sensor=true',
                success: function (data) {
                    alert(data.results[0].formatted_address);
                    var addr = data.results[0];
                    if (addr != undefined) {
                        debugger;
                        var addrList = _.map(addr.address_components, function (address) {
                            return {
                                type: $(address.types)[0],
                                value: address.long_name

                            }
                        });

                        var x = _.filter(addrList, function (address) {
                            return address.type === "street_number" ||
                                    address.type === "route" ||
                                    address.type === "sublocality_level_2" ||
                                    address.type === "sublocality_level_1";
                        });
                        var primaryAddr = "";
                        $(x).each(function (index, element) {
                            if (index == 0)
                                primaryAddr = primaryAddr + element.value;
                            else
                                primaryAddr = primaryAddr + ', ' + element.value;
                        });
                        $('#PrimaryAddress').val(primaryAddr);

                        var city = _.filter(addrList, function (address) {
                            return address.type === "locality";
                        })[0].value;
                        $('#City').val(city);

                        var state = _.filter(addrList, function (address) {
                            return address.type === "administrative_area_level_1";
                        })[0].value;
                        $('#State').val(state);

                        var country = _.filter(addrList, function (address) {
                            return address.type === "country";
                        })[0].value;
                        $('#Country').val(country);

                       
                        /*or you could iterate the components for only the city and state*/
                    }
                }
            });
            //    geocoder.geocode({ 'location': latlng }, function (results, status) {
            //        if (status === google.maps.GeocoderStatus.OK) {
            //            if (results[1]) {
            //                map.setZoom(11);
            //                var marker = new google.maps.Marker({
            //                    position: latlng,
            //                    map: map
            //                });
            //                infowindow.setContent(results[1].formatted_address);
            //                infowindow.open(map, marker);
            //            } else {
            //                window.alert('No results found');
            //            }
            //        } else {
            //            window.alert('Geocoder failed due to: ' + status);
            //        }
            //    });

            //});
        });
    });

</script>
